<template>
    <div>
        <div class="wrap">
            <div class="head" @click="quit">
            </div>
            <div class="time">
                距离获得免单机会还剩{{time}}秒
            </div>
            <div class="main">
                广告招租
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                time:8,
                timeout:null,
                timeintevl:null,
            }
        },
        created() {
            this.timer = setInterval(() => {
                this.time = this.time - 1;
            }, 1000)
        },
        watch: {
            time(newValue) {
                if (newValue == 0) {
                    clearTimeout(this.timer)
                    this.$dialog({ message: '成功免单！！' }).then(() => {
                        console.log('支付');
                        window.sessionStorage.setItem("free","true");
                        this.$emit('if-ban');
                    })
                }
            },
        },
        methods:{
            quit(){
                this.$dialog.confirm({
                    title: '还未获得奖励，是否退出',
                    message: '',
                    confirmButtonText: '继续观看',
                    cancelButtonText: '忍心退出',
                    cancelButtonColor: '#9b486b'
                })
                    .then(() => {
                        console.log('看');
                    })
                    .catch(() => {
                        this.$emit('if-ban');
                    });
            }
        }
        
    }
</script>

<style lang="scss" scoped>
.wrap{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba($color: #000000, $alpha: 0.7);
    z-index: 10;
    .head{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-image: url('../assets/images/tp_close.png');
        background-position: center;
        background-color: #000000;
        background-size: 90%;
        position: absolute;
        top: 10px;
        left: 10px;
        border: 2px solid #000;
        z-index: 10;
    }
    .time{
        color: #eee;
        font-size: 12px;
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .main{
        width: 100%;
        height: 400px;
        background-color: #000000;
        top: 100px;
        left: 0;
        position: absolute;
        font-size: 24px;
        color: #999;
    }

}
</style>